<template>
  <div class="home">
    <Title>系统首页</Title>
    <!--    头部数据-->
    <div class="header">
      <el-card class="box-card cardViolet">
        <div>
          <div class="title">
            <i class="iconfont icon-leiji"></i>
            累积销售额(元)
          </div>
          <div class="num">{{homeData.salesVolume}}</div>
        </div>
      </el-card>
      <el-card class="box-card cardBlue">
        <div class="title">
          <i class="iconfont icon-fenxiao2"></i>
          已有会员
        </div>
        <div class="num">{{homeData.user}}</div>
      </el-card>
      <el-card class="box-card cardOrange">
        <div class="title">
          <i class="iconfont icon-tishengfantaishuai"></i>
          翻台率
        </div>
        <div class="num">{{homeData.turnoverRate}}</div>
      </el-card>
      <el-card class="box-card cardGreen">
        <div class="title">
          <i class="iconfont icon-dd"></i>
          累积订单量
        </div>
        <div class="num">{{homeData.order}}</div>
      </el-card>
    </div>

    <!--    图表-->
    <div class="chart">
      <div class="item">
        <Title>累计销售总额</Title>
        <el-card class="box-card">
          <div id="salesVolume" style="width: 100%;height:400px;"></div>
        </el-card>
      </div>
      <div class="item" style="margin-left: 20px">
        <Title>累计订单总数</Title>
        <el-card class="box-card">
          <div id="order" style="width: 100%;height:400px;"></div>
        </el-card>
      </div>
    </div>

    <!--    底部-->
    <div class="footer">
      <div class="item">
        <Title>菜品总览</Title>
        <el-card class="box-card">
          <div class="cardItem">
            <div class="left"><i class="iconfont icon-yishangjia"></i></div>
            <div class="right">
              <div class="title">品类</div>
              <div class="num">{{homeData.category}}</div>
            </div>
          </div>
          <div class="cardItem">
            <div class="left"><i class="iconfont icon-jian"></i></div>
            <div class="right">
              <div class="title">推荐</div>
              <div class="num">{{homeData.recommend}}</div>
            </div>
          </div>
          <div class="cardItem">
            <div class="left"><i class="iconfont icon-quanbu"></i></div>
            <div class="right">
              <div class="title">全部菜品</div>
              <div class="num">{{homeData.goods}}</div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="item" style="margin-left: 20px">
        <Title>会员总览</Title>
        <el-card class="box-card">
          <div class="cardItem">
            <div class="left"><i class="iconfont icon-huiyuan"></i></div>
            <div class="right">
              <div class="title">已有会员</div>
              <div class="num">{{homeData.user}}</div>
            </div>
          </div>
          <!--          <div class="cardItem">-->
          <!--            <div class="left"><i class="iconfont icon-xinzeng" style="font-size: 28px"></i></div>-->
          <!--            <div class="right">-->
          <!--              <div class="title">昨日新增</div>-->
          <!--              <div class="num">100</div>-->
          <!--            </div>-->
          <!--          </div>-->
          <div class="cardItem">
            <div class="left"><i class="iconfont icon-icon"></i></div>
            <div class="right">
              <div class="title">本月新增</div>
              <div class="num">{{homeData.newMember}}</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>

  </div>
</template>

<script>
  import Title from "../../components/Title/Title"
  import {getHomeData} from "../../api/api"

  export default {
    name: "home",
    components: {Title},
    data() {
      return {
        homeData: {}
      }
    },
    methods: {
      //获取数据
      async getData() {
        const res = await getHomeData()
        this.homeData = res.data
      },
      //销量
      salesVolume() {
        let myChart = this.$echarts.init(document.getElementById('salesVolume'))
        myChart.setOption({
          tooltip: {},
          color: ['#81d3ed'],
          xAxis: {
            data: ['12:00', '14:00', '16:00', '18:00', '20:00']
          },
          yAxis: {
            axisLine: {show: true}
          },
          series: [{
            type: 'bar',
            data: this.homeData.cumulativePrice,
            barWidth: 30
          }]
        })
      },
      //订单
      order() {
        let myChart = this.$echarts.init(document.getElementById('order'))
        myChart.setOption({
          color: ['#e1786e'],
          xAxis: {
            type: 'category',   // 还有其他的type，可以去官网喵两眼哦
            data: ['12:00', '14:00', '16:00', '18:00', '20:00'],   // x轴数据
            boundaryGap: false,
          },
          yAxis: {
            axisLine: {show: true},
            type: 'value',
            // y轴名称样式
            nameTextStyle: {
              fontWeight: 600,
              fontSize: 18
            }
          },
          label: {},
          series: [{
            data: this.homeData.cumulativeOrder,
            type: 'line',
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#e1786e",
                  normal: {color: "#e1786e"}
                },
                areaStyle: {
                  type: 'default',
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 0.8,
                    x3: 0,
                    y3: 1,
                    colorStops: [{
                      offset: 0, color: '#ffde99' // 0% 处的颜色
                    }, {
                      offset: 0.8, color: '#fbdac7' // 100% 处的颜色
                    }, {
                      offset: 1, color: '#fff' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
                },
              }
            },
          }]
        })
      },
    },
    async mounted() {
      await this.getData()
      this.salesVolume()
      this.order()
    },
    created() {
    }
  }
</script>

<style scoped lang="scss">
  .home {
    .header {
      display: flex;
      justify-content: space-between;

      .box-card {
        color: white;
        width: 25%;
        margin: 0 10px;
        border-radius: 10px;

        .title {
          font-size: 14px;

          .iconfont {
            margin-right: 0;
          }
        }

        .num {
          margin-top: 20px;
          margin-bottom: 5px;
          text-align: center;
          font-size: 22px;
          font-weight: bold;
        }
      }
    }

    .chart {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;

      .item {
        width: 50%;

        .box-card {
          border-radius: 10px;
        }
      }
    }

    .footer {
      margin-top: 20px;
      display: flex;


      .item {
        width: 50%;

        .box-card {
          width: 100%;
          display: flex;
          justify-content: space-between;
        }

        .cardItem {
          display: flex;
          flex: 1;
          justify-content: center;
          align-items: center;

          .left {
            padding-bottom: 8px;

            i {
              font-size: 20px;
              margin-right: 10px;
              color: #f99900;
            }
          }


          .right {
            .title {
              font-size: 12px;
            }

            .num {
              text-align: center;
              font-size: 20px;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
</style>
